<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <SecenceTree class="w-1/5 xl:w-1/6" @select="handleSelect" />
    <div ref="wrapEl" class="m-4 mr-0 w-4/5 xl:w-5/6 box">
      <component :is="FadeTransition">
        <img id="senceurl" alt="" class="box" v-show="show" />
      </component>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { PageWrapper } from '@/components/Page';
import SecenceTree from './ScenceTree.vue';
import { getScenceDetail } from '@/api/collection/scence/index';
import { fileDownload } from '@/api/download';
import defaultScence from '@/assets/images/defaultSence.svg'
import { useLoading } from '@/components/Loading/index';
import { FadeTransition } from '@/components/Transition';
import { message } from 'ant-design-vue';

defineOptions({ name: 'ScenceManagement' });

const wrapEl = ref<ElRef>(null);
const show = ref(true);

const [openWrapLoading, closeWrapLoading] = useLoading({
  target: wrapEl,
  props: {
    tip: '加载中...',
    absolute: true,
  },
});

async function handleSelect(params) {
  if (params.id) {
    const res = await getScenceDetail({ id: params.id })
    if (res.type === 2 && res.file) {
      show.value = false;
      // openWrapLoading();
      const ret = await fileDownload({ id: res.file.id, isOnline: true })
      const blob = new Blob([ret])
      const reader = new window.FileReader();
      reader.readAsDataURL(blob)
      reader.onloadend = function () {
        document.querySelector('#senceurl')!.src = reader.result
        document.querySelector('#senceurl')!.style.height = `100%`
        document.querySelector('#senceurl')!.style.width = `100%`
        // console.log(reader, document.querySelector('#senceurl')!.src);
        // closeWrapLoading()
        show.value = true;
      }
      // 超过5秒不管是否错误，自动关闭loading
      // setTimeout(() => {
      //   closeWrapLoading();
      //   show.value = true;
      // }, 5000);
    } else if (!res.file && res.parentId !== '0') message.warn('图片不存在, 请添加图片')
  }
}

onMounted(() => {
  document.querySelector('#senceurl')!.src = defaultScence
});

</script>

<style lang="less" scoped>
.box {
  overflow: auto;
  background-color: rgb(243 245 248);
}
</style>
